import React, { Suspense } from 'react'
import {
	Router,
	Route,
	Switch,
	Redirect,
} from 'react-router-dom'
import history from '@/utils/history'

// 按需加载必须要配合Suspense一起使用
const Login = React.lazy(() => import('@/pages/Login/index'))
const Home = React.lazy(() => import('@/pages/Layout/index'))
const ProfileEdit = React.lazy(() => import('@/pages/Profile/Edit'))
const ProfileChat = React.lazy(() => import('@/pages/Profile/Chat'))
const AuthRoute = React.lazy(() => import('@/components/AuthRoute'))
const Feedback = React.lazy(() => import('@/pages/Profile/Feedback'))
const NotFound = React.lazy(() => import('@/components/NotFound'))

export default function App() {
	return (
		<Router history={history}>
			<Suspense fallback={<div>loading....</div>}>
				<Switch>
					<Redirect exact from="/" to="/home"></Redirect>
					<Route path="/login" component={Login}></Route>
					<Route path="/home" component={Home}></Route>
					<AuthRoute path='/profile/edit' component={ProfileEdit}></AuthRoute>
					<AuthRoute path='/profile/Chat' component={ProfileChat}></AuthRoute>
					<AuthRoute path='/profile/feedback' component={Feedback}></AuthRoute>
					<Route path="*" component={NotFound}></Route>
				</Switch>
			</Suspense>
		</Router>
	)
}
